<template>
    <van-nav-bar style="overflow: hidden;" left-arrow fixed>
        <template #left>
            <div class="L">XINGE</div>
        </template>
        <template #title>
            <van-search @search="onSearch" v-model="sousuo" placeholder="请输入搜索关键词">
                <template #left-icon>
                    <van-icon name="search" color="#000" />
                </template>
            </van-search>
        </template>
        <template #right>
            <van-cell @click="showPopup">
                <template #title>
                    <van-icon name="list-switching" color="#000" size="35" />
                </template>
            </van-cell>
        </template>
    </van-nav-bar>
    <div class="h50"></div>
    <div class="clear"></div>
    <div class="aui-m-slider">
        <div class="m-slider" data-ydui-slider>
            <van-swipe style="height: 200px;" :autoplay="3000" indicator-color="bule" lazy-render loop :duration="1000">
                <van-swipe-item><img src="/assets/images/banner.jpg"></van-swipe-item>
                <van-swipe-item><img src="/assets/images/banner.jpg"></van-swipe-item>
                <van-swipe-item><img src="/assets/images/banner.jpg"></van-swipe-item>
                <van-swipe-item><img src="/assets/images/banner.jpg"></van-swipe-item>
                <template #indicator="{ active, total }">
                    <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
                </template>
            </van-swipe>
        </div>
    </div>
    <div class="clear"></div>
    <div class="lqgwBox">
        <div class="titbox">先领券/再购物</div>
        <div class="img"><img src="/assets/images/1.jpg"></div>
        <ul>
            <li v-for="(item, index) in navdata" :key="index">
                <router-link
                    :to="index === 7 ? { path: '/product/type/index' } : { path: '/home/type/index', query: { id: item.id } }">
                    <img :src="item.thumbs_cdn">
                    <p>{{ item.name }}</p>
                </router-link>
            </li>
        </ul>
    </div>
    <div class="clear"></div>
    <div class="ljgqBox">
        <div class="L"><img src="/assets/images/2.jpg"></div>
        <div class="R">
            <ul>
                <li>
                    <div class="bg1"></div>
                    <div class="pri_1">￥1899</div>
                </li>
                <li>
                    <div class="bg2"></div>
                    <div class="pri_2">￥2899</div>
                </li>
            </ul>
        </div>
    </div>
    <div class="shangpingdata">
        <template v-for="(products, flag) in getproductdata">
            <div class="clear"></div>
            <div class="contitbox">
                <p>商品<span>•</span>{{ getCategoryLabel(flag) }}</p>
            </div>
            <ul class="proul">
                <li v-for="item in products" :key="item.id">
                    <div class="con">
                        <router-link :to="{ path: '/product/product/info', query: { id: item.id } }">
                            <img :src="item.cover_cdn || '/assets/images/detail.png'" @error="handleImageError($event)">
                            <p><span>￥</span>{{ item.price }}</p>
                        </router-link>
                    </div>
                </li>
            </ul>
            <div class="clear"></div>
        </template>
    </div>
    <div class="h54"></div>
    <Footer />
</template>

<script setup>
import Footer from 'components/common/Footer.vue';
import { ref, getCurrentInstance, onMounted } from 'vue'
const { proxy } = getCurrentInstance();
const navdata = ref([]);
const getproductdata = ref([]);
//搜索
const sousuo = ref('');
onMounted(() => {
    getTypeData();
    getproduct();
})

const onSearch = (values) => {
    proxy.$router.push({
        path: '/home/type/index',
        query: { keyword: values }
    })
}

const showPopup = () => {
    proxy.$router.push({
        path: "/home/type/index"
    })
}

const getTypeData = async () => {
    let res = await proxy.$Api.typeData();
    if (res && res.code === 1) {
        for (let item of res.data) {
            navdata.value = res.data;
            if (navdata.value.length > 7) {
                navdata.value[7] = {
                    name: '更多',
                    thumbs_cdn: '/assets/images/icon_8.png'
                }
            }
        }
    }
}

const getproduct = async () => {
    // You should use the 'proxy' to call your API here
    let res = await proxy.$Api.getProduct();

    if (Array.isArray(res.data)) {
        const categories = {};
        res.data.forEach(item => {
            if (!categories[item.flag]) {
                categories[item.flag] = [];
            }
            if (categories[item.flag].length < 4) {
                categories[item.flag].push(item);
            }
        });
        getproductdata.value = categories;
    }
};

const getCategoryLabel = (flag) => {
    switch (flag) {
        case '1': return '新品';
        case '2': return '热销';
        case '3': return '推荐';
        default: return '其他';
    }
};

const handleImageError = (event) => {
    event.target.src = '/assets/images/detail.png';
};
</script>

<style>
 .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.5);
  }
</style>